<template>
  <div class="container">
    <meeting-detail
      :meeting-id="meetingId"
      @getMeetingData="getMeetingData"
    />

    <el-tabs
      v-model="activeName"
      type="border-card"
      class="mt30"
      @tab-click="changeTab"
    >
      <el-tab-pane name="invite" label="参会邀请">
        <meeting-invite-list
          v-if="activeName === 'invite'"
          :meeting-id="meetingId"
        />
      </el-tab-pane>
      <el-tab-pane name="apply" label="预约名单">
        <meeting-apply-list
          v-if="activeName === 'apply'"
          :meeting-id="meetingId"
          :meeting-name="meetingTitle"
        />
      </el-tab-pane>
      <el-tab-pane name="signin" label="签到">
        <meeting-checkin-list
          v-if="activeName === 'signin'"
          :meeting-id="meetingId"
          :meeting-name="meetingTitle"
        />
      </el-tab-pane>
      <el-tab-pane name="schedule" label="出行和住宿">
        <meeting-schedule-list
          v-if="activeName === 'schedule'"
          :meeting-id="meetingId"
        />
      </el-tab-pane>
      <el-tab-pane name="surveys" label="会后调研">
        <meeting-surveys-list
          v-if="activeName === 'surveys'"
          :meeting-id="meetingId"
          :meeting-name="meetingTitle"
        />
      </el-tab-pane>
      <el-tab-pane name="votes" label="会议互动">
        <meeting-votes-list
          v-if="activeName === 'votes'"
          :meeting-id="meetingId"
          :meeting-name="meetingTitle"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import MeetingDetail from './components/MeetingDetail'
import MeetingInviteList from './invite/list'
import MeetingCheckinList from './checkin/list'
import MeetingScheduleList from './schedule/list'
import MeetingApplyList from './apply/list'
import MeetingSurveysList from './surveys/list'
import MeetingVotesList from './votes/list'

export default {
  name: 'MeetingShow',
  components: {
    MeetingDetail,
    MeetingInviteList,
    MeetingCheckinList,
    MeetingScheduleList,
    MeetingApplyList,
    MeetingSurveysList,
    MeetingVotesList
  },
  data() {
    return {
      meetingId: '',
      meetingTitle: '',
      activeName: 'invite'
    }
  },
  watch: {
    $route: {
      handler(route) {
        this.meetingId = route.params && route.params.id
        this.activeName = route.query && route.query.type
        this.changeTab(this.activeName)
      },
      immediate: true
    }
  },
  created() {
    this.meetingId = this.$route.params.id
    if (this.$route.query.type) {
      this.activeName = this.$route.query.type
    } else {
      this.activeName = 'invite'
    }
  },
  methods: {
    changeTab() {
      this.$router.push({
        query: {
          type: this.activeName
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getMeetingData(data) {
      const meetingData = data.data
      // console.log(meetingData)
      this.meetingTitle = meetingData.meetingtitle
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 40px 140px;
}
</style>
